<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: consolas;
}
section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #5b5708;
  animation: animateBackgroundColor 10s linear infinite;
}
@keyframes animateBackgroundColor {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
.loading {
   position: relative;
   width: 250px;
   height: 250px;
}
.loading .blocks {
  position: absolute;
  width: 8px;
  height: 25px;
  border-radius: 4px;
  background: #050505;
  left: 50%;
  transform: rotate(calc(18deg * var(--i)));
  transform-origin: 0 125px;
  animation: animate 1.9s ease-in-out infinite;
  /* animation: name duration timing-function delay iteration-count direction fill-mode; */
  animation-delay: calc(.05s * var(--i));
}
@keyframes animate {
  0%, 50% {
    background-color: salmon;
    box-shadow:  0 0 5px salmon,
    0 0 15px salmon,
    0 0 30px salmon,
    0 0 60px salmon,
    0 0 90px salmon;
  }
  50.1%, 100% {
    background: #050505;
    box-shadow: none;
  }
}
h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  letter-spacing: 2px;
  animation:  animateText 2s ease-in-out infinite;
}
@keyframes animateText {
  0%, 50% {
    color: #050505;
    text-shadow: none;
  }
  50.1%, 100% {
    color: salmon;
    text-shadow:  0 0 5px salmon,
    0 0 15px salmon;
  }
}

/* 360 * 20 = 18 each */
/* 1 / 20 = 0.05 */


</style>
</head>
<body>
  <section>
    <div class="loading">
      <div class="blocks" style="--i:1"></div>
      <div class="blocks" style="--i:2"></div>
      <div class="blocks" style="--i:3"></div>
      <div class="blocks" style="--i:4"></div>
      <div class="blocks" style="--i:5"></div>
      <div class="blocks" style="--i:5"></div>
      <div class="blocks" style="--i:6"></div>
      <div class="blocks" style="--i:7"></div>
      <div class="blocks" style="--i:8"></div>
      <div class="blocks" style="--i:9"></div>
      <div class="blocks" style="--i:10"></div>
      <div class="blocks" style="--i:11"></div>
      <div class="blocks" style="--i:12"></div>
      <div class="blocks" style="--i:13"></div>
      <div class="blocks" style="--i:14"></div>
      <div class="blocks" style="--i:15"></div>
      <div class="blocks" style="--i:16"></div>
      <div class="blocks" style="--i:17"></div>
      <div class="blocks" style="--i:18"></div>
      <div class="blocks" style="--i:19"></div>
      <div class="blocks" style="--i:20"></div>
      <h3>Loading</h3>
    </div>
  </section>
</body>
</html>